<template>
  <div>
    <img :src="url" alt="" />
    <div class="box-container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" :status-icon="true" method="post" action="/">
        <!-- 商品名称 -->
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="ruleForm.name" size="medium" name="name"></el-input>
        </el-form-item>

        <!-- 商品种类下拉菜单 -->
        <el-form-item label="商品种类" prop="classify">
          <el-select v-model="ruleForm.classify" placeholder="请选择种类">
            <el-option v-for="(item, index) in classify" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 商品种类填写区, 两者已经绑定 -->
        <div class="box-1">
          <el-form-item label="商品种类">
            <el-input v-model="clares" name="classify"></el-input>
          </el-form-item>
        </div>
        <div class="box-1">
          <el-form-item label="商品价格">
            <el-input type="number" placeholder="请输入商品价格" v-model="ruleForm.price" name="price"></el-input>
          </el-form-item>
        </div>

        <!-- 商品添加日期时间 -->
        <el-form-item label="此商品添加时间" required>
          <el-date-picker v-model="ruleForm.time" type="datetime" placeholder="选择日期时间"> </el-date-picker>
        </el-form-item>

        <!-- 是否可配送 -->
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="ruleForm.delivery" name="delivery"></el-switch>
        </el-form-item>
        <el-form-item label="商品描述" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc" name="details"></el-input>
        </el-form-item>

        <!-- 商品图片 -->
        <el-form-item label="商品图片">
          <Uploadimg @change-img="settingsrc"></Uploadimg>
        </el-form-item>
        <!--  -->

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 弹出框 -->
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
        <span>{{ hint }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Uploadimg from '@/components/base/uploadimg.vue'
import { addGoods } from '@/api/index.js'
import imgurl from '@/assets/image/addgoods.png'
export default {
  data() {
    return {
      url: imgurl,
      img: {},
      // imgsrc: '',
      classify: ['零食', '面包', '水果'],
      centerDialogVisible: false,
      clares: '',
      hint: '',
      ruleForm: {
        name: '',
        classify: '',
        price: '',
        time: '',
        delivery: true,
        desc: ''
      },
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 3, message: '长度在 3 到 40 个字符', trigger: 'blur' }
        ],
        classify: [{ required: true, message: '请选择种类', trigger: 'change' }],
        time: [{ type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }],
        desc: [{ required: true, message: '请填写宝贝描述', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 当点击提交触发事件
    submitForm(formName) {
      // 验证规则合法执行
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 创建formdata实例
          const formData = new FormData()
          formData.append('name', this.ruleForm.name)
          formData.append('classify', this.ruleForm.classify)
          formData.append('price', this.ruleForm.price)
          formData.append('time', this.ruleForm.time)
          formData.append('details', this.ruleForm.desc)
          formData.append('file', this.img)
          // 发送数据
          this.postGoods('/api/back/addGoods', formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm.time = ''
      this.ruleForm.price = ''
    },
    settingsrc(e) {
      // 从子图片组件获得file.files[0]
      this.img = e
    },
    async postGoods(url, data) {
      // 发送ajax请求
      const response = await addGoods(url, data)
      // 成功与否弹窗
      if (response === 'ok') {
        this.hint = '添加商品成功了哦'
        this.centerDialogVisible = true
      } else {
        this.hint = '这次商品没有成功添加，请再试一次'
        this.centerDialogVisible = true
      }
    }
  },
  watch: {
    // 将两个种类框联系一起
    'ruleForm.classify'() {
      this.clares = this.ruleForm.classify
    },
    clares() {
      this.ruleForm.classify = this.clares
    }
  },
  components: {
    Uploadimg
  }
}
</script>

<style lang="less" scoped>
.box-container {
  padding: 0px 40px;
  box-sizing: border-box;

  margin: 40px 200px;
  width: 600px;
}

.box-1 {
  width: 62%;
}
</style>
